<template>
    <div class="box1 ">
        <div class="search-bar flex ">
            <div class="category"></div>
            <div class="search-form flex flex-item"> 
                <input type="search" placeholder="淘立堡" />
                <i class="icon-search"></i>
            </div>
            <div class="infor"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SearchBar",
    data() {
        return {
            
        }
    } 
}
</script>

<style lang="less">
    .box1{
        height: 2.5rem;
        // background-color: #E9090E;
        // background-color:-moz-linear-gradient(to top,#EF191C 0%,#E60106 100%);
        background:linear-gradient(to top,#EF191C 0%,#E60106 100%);
        // background-color:-o-linear-gradient(to top,#EF191C 0%,#EB0E13 30%,#E9090E 60%,#E60106 100%);
    }
    .search-bar{
        padding-top: 0.4rem;
        box-sizing: border-box;
        .search-form{
            position: relative;
            input{
                width: 100%;
                height: 0.7rem;
				line-height: 0.9rem;
				font-size: 0.4rem;
				border: none;
				outline: none;
				border-radius: 0.35rem;
                text-align: center;
                margin-top:0.12rem; 
            }
                .icon-search{
                    display: inline-block;
                    // display: block; //也可以因有定位了！
                    background: url("../../assets/images/box1/search.png") no-repeat center;
                    background-size: 0.45rem 0.45rem; 
                    width: 0.56rem;
                    height: 0.56rem;
                    position: absolute;
                    right: 0.3rem;
                    top: 0.2rem;
                }
        }
        .category{
            width: 1rem;
            height: 0.9rem;
            background-image: url('../../assets/images/box1/cate.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.34rem 0.34rem;
        }
        .infor{
            width: 1.1rem; 
            background-image: url('../../assets/images/box1/infor.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.42rem 0.29rem;
        }
    } 
</style>